<%@page contentType="text/html; charset=utf-8"%>

<div class="easyui-layout" data-options="fit: true">
	<div data-options="region: 'north', border: false" style="height: 40px; padding:5px 5px; overflow: hidden">
		<div class="search-bar">
			<div class="bar-row">
				<button type="button" onclick="checkAll();" class="btn btn-green btn-xs height-25 mt-3 float-left"><div class='icon-div'><i class='fa fa-check-square-o fa-120 pt-2'></i></div> 全选</button>
				<button type="button" onclick="uncheckAll();" class="btn btn-blue btn-xs height-25 mt-3 ml-1 float-left"><div class='icon-div'><i class='fa fa-square-o fa-120 pt-2'></i></div> 不选</button>
				
				<div class="bar-input ml-10">
            		<input id="menu" class="easyui-validatebox" type="text" style="width: 150px; height: 25px;" />
           		</div>
			</div>
		</div>
				
    </div>
	<div data-options="region: 'center', border: false" style="border-top: 1px solid #ddd;">
		<div id="tg"></div>
    </div>
</div>


<script>
	var $tg, $menu, operIds = "${operIds}" ;
	$(function(){
		loadResource() ;
		
		$menu = $("#menu").combobox({
			url: "${ctx}/admin/sys/menu/listAll",
			valueField: "id", textField: "name", panelHeight: "auto",
			onSelect: function(record) {
				$tg.treegrid({url: "${ctx}/admin/sys/role/resourceTree?menuId="+record.id}) ;
			},
			onLoadSuccess: function() {
				var data= $menu.combobox("getData") ;
				if(data.length > 0) {
					$menu.combobox("setValue", data[0].id);
					$tg.treegrid({url: "${ctx}/admin/sys/role/resourceTree?menuId="+data[0].id}) ;
				} else {
					$("button").attr("onclick", "").click(function(){
						alertify.warning("目前没有菜单，请先创建菜单！");
					}); ;
				}
			}
		});
	});	
	
	function loadResource() {
		$tg = $("#tg").treegrid({
            idField: "id", treeField: "name", fit: true, autoRowHeight: true, 
            border: false, striped:true, singleSelect: true,rownumbers: true, 
            sortName: 'weight', sortOrder: 'asc',
            frozenColumns: [[
                { field: "id", title: "ID", width: 50, hidden: true },
                { field: "name", title: "资源名称", width: 180 },
            ]],
            columns: [[
                { field: 'operations', title: '操作权限', formatter: function(val, row, index){
                	var opers = "";
                	if(undefined != row.operations && row.operations.length > 0) {
                		opers += "<span id='icheck'><input id='oper_check"+row.id+"' type='checkbox' name='check' class='index_"+row.id+"'> <label class='irl' for='oper_check"+row.id+"'><b style='color:red;'>全选</b></label></span>　" ;
                		
	                	$.each(val, function(i, p){
	                		var chk = "<span id='icheck'><input id='oper_"+p.id+"' type='checkbox' name='operation_id' value='"+p.id+"' class='index_"+row.id+"'> <label class='irl' for='oper_"+p.id+"'>"+ p.name+"</label></span>　" ;
	                		opers += chk ;
	                	});
                	}
                	return opers ;
	            }}
            ]],
            onLoadSuccess: function(){
            	$.fn.treegrid.extensions.onLoadSuccess.apply(this, arguments);
            	$tg.treegrid('unselectAll');$tg.treegrid('clearSelections');
            	
            	$("#icheck input[type=checkbox]").iCheck({
        			checkboxClass: 'icheckbox_square-red'
        	   	});
            	$("#icheck input[type=checkbox][name=check]").on('ifClicked', function(event){
            		if(event.target.checked==true) {
            			$("#icheck input[type=checkbox][class="+event.target.className+"]").iCheck('uncheck') ;
            		} else {
            			$("#icheck input[type=checkbox][class="+event.target.className+"]").iCheck('check') ;
            		}
        		});
            	
            	if(operIds) {
            		var operIdsArray = operIds.split(",") ; 
            		$.each(operIdsArray, function(i, v) {
            			$("#icheck #oper_"+v).iCheck('check') ;
            		});
            	}
            },
            enableHeaderClickMenu: true, enableHeaderContextMenu: true, enableRowContextMenu: false
        });
	}
	
	function checkAll() {
		$("#icheck input[type=checkbox]").iCheck("check");
	}
	function uncheckAll() {
		$("#icheck input[type=checkbox]").iCheck("uncheck");
	}
	
	//提交表单数据
	var submitNow = function($d, $dg, flag) {
		//操作权限的ID集合
		var opers_ids = [] ;
		
		var check_opers = $("#icheck input[type=checkbox][name=operation_id]:checked") ;
		$.each(check_opers, function(i, e){
			opers_ids.push($(e).val()) ;
		});
		$.post("${ctx}/admin/sys/role/addRoleResource", {"roleIds": "${roleIds}", "resourceIds": opers_ids.join(",")}, function(result) {
			if (result.status) {
				alertify.success(result.message);$.easyui.loaded();
				if(flag==undefined||flag==false){$d.dialog("close") ;}
			} else {
				$.easyui.loaded();$.messager.alert("错误", result.message, "error");
			}
		}, 'json').error(function() { $.easyui.loaded(); });
	};
	
	//验证表单
	var submitForm = function($d, $dg, flag) { 
		if($('#form').form('validate')) {
			$.easyui.loading({ msg: "数据提交中，请稍等..." });
			submitNow($d, $dg, flag) ;
		}
	};
	
	
</script>

